@import '../../ui/base'

.list
	@extends .form
	width 700px
	> div
		> h2
			color #a4b2bb
		> div
			background-color #f3f6f9
	.item
		@extends .h-center
		> label
			margin-right 10px
			min-width 90px
			text-align right
	.editor
		align-items flex-start

.avatar
	position relative
	width 100px
	height 100px
	display inline-block
	.avatarImage
		display inline-block
		width 100px
		height 100px
		background-repeat no-repeat
		margin 0
		transition background-image .2s
	input
		position absolute
		width 100px
		height 100px
		left 0
		top 0
		z-index -1
		display none
	i
		background-color #d8d8d8
		color #bdbdbd
	.text
		height 24px
		background-color rgba(0,0,0,.3)
		font-size 13px
		color #fff
		text-align center
		line-height 24px
		position absolute
		bottom 0
		width 100%
		left 0
		margin 0
		font-weight normal

.cropImage
	clear fix
	> *
		float left

.cropPreview
	display flex
	flex-direction column
	align-items center
	margin-left 20px
	li
		border-radius 3px
		background-repeat no-repeat
		& + li
			margin-top 10px
		&.circle
			border-radius 100%

.cropImageDialog
	[data-role="close"]
		top -5px
		right -30px
